import styled from './index.module.scss'
import {useCallback, useEffect, useRef, useState} from 'react'
import {orderConfig, orderReceived} from '@/api'
import {Button, Table, Space, message} from 'antd'
import config from '@/static/config'
import {ReceivedModal} from '@/pages/received/ReceivedModal'
import {receivedModalType} from '@/type/receivedType'
import {orderLogisticsType} from '@/type/personalDeal'
import {getOrderValue} from '@/utils'



const Received = () => {
	const [list, setList] = useState([])
	const modal = useRef<{
		modalInit: (data: receivedModalType) => void
	}>()

	useEffect(() => {
		getList()
	}, [])

	const onReceived = useCallback((rows:orderLogisticsType) => {
		modal.current?.modalInit({
			product_id: rows.product_id
		})
	}, [list, modal])

	const onConfig = (rows:orderLogisticsType) => {
		console.log(rows)
		orderConfig(rows).then(res => {
			if (res.code === 200) {
				message.success(res.message)
				getList()
			}
		})
	}

	function getList () {
		orderReceived().then(res => {
			if (res.code === 200) {
				setList(res.data)
			}
		})
	}

	const columns = [
		{
			title: "商品图片",
			dataIndex: "product_pic",
			align: "center",
			render: (text) => {
				console.log(text)
				return (
					<img src={config.productImgUrl + text} alt="" width={40} height={40}/>
				)
			}
		},
		{
			title: "商品名称",
			dataIndex: "product_name",
			align: "center",
		},
		{
			title: "数量",
			dataIndex: "order_count",
			align: "center",
		},
		{
			title: "价格",
			dataIndex: "order_product_total",
			align: "center",
		},
		{
			title: "订单状态",
			dataIndex: "order_status",
			align: "center",
			render: (text) => {
				return getOrderValue(text).value
			}
		},
		{
			title: "操作",
			dataIndex: "id",
			align: "center",
			render: (text, rows) => {
				return (
					<Space>
						{
							rows.order_status !== "5" &&  rows.order_status !== "6" && rows.order_status !== "7" &&
							<Button type={'primary'} onClick={() => onConfig(rows)}>申请退货</Button>
						}
						<Button onClick={() => onReceived(rows)}>评价</Button>
					</Space>

				)
			}
		},
	]

	return (
		<div className={styled.received}>
			<Table columns={columns} rowKey={'id'} dataSource={list} pagination={false}></Table>
			<ReceivedModal ref={modal}></ReceivedModal>
		</div>
	)
}
export default Received
